<script>
  $(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
  });
</script>
<style>
  .ui-tabs-vertical { width: 55em; }
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; width: 84%; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Recruiting</a></li>
    <li><a href="#tabs-2">Stats</a></li>
    <li><a href="#tabs-3">Bio</a></li>
	<li><a href="#tabs-4">Awards</a></li>
	<li><a href="#tabs-5">My Schools</a><li>
	<li><a href="#tabs-6">Film</a><li>
  </ul>
  <div id="tabs-1">
	<h2>Recruiting</h2>
  </div>
  <div id="tabs-2">
    <h2>Stats</h2>
  </div>
  <div id="tabs-3">
    <h2>Bio</h2>
	<?php
		include("player_bio.php");
	?>
  </div>
  <div id="tabs-4">
    <h2>Awards</h2>
		<?php //awards stuff kept in same table as bio stuff?>
  </div>
  <div id="tabs-5">
	<h2>My Schools</h2>
		<?php
		$the_list = $favorite_schools;
		$favorites_page = TRUE;	//enables the add to favorite button	
		include("school_list.php"); 
		$favorites_page = FALSE;
		?>
  </div>
  <div id = "tabs-6">
	<h2>Film</h2>
	<?php
		include("film.php");
	?>
  </div>

</div>